<template>
    <div>
        <div class="header">
            <div class="back-icon">
                <van-icon name="arrow-left" @click="goBack" />
            </div>
            <div class="title">{{ title }}</div>
            <div class="share-icon">
                <van-icon name="share-o" />
            </div>
        </div>
        <div class="banner">
            <!-- <van-swipe>
        <van-swipe-item>
          <img src="https://example.com/banner1.jpg" alt="Banner 1">
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://example.com/banner2.jpg" alt="Banner 2">
        </van-swipe-item>
      </van-swipe> -->
            <div class="banner-indicator">
                <span v-for="(item, index) in 2" :key="index" :class="{ active: index === 0 }"></span>
            </div>
        </div>
        <div class="service-info">
            <div class="service-title">多名师傅报价，择优选择</div>
            <div class="service-description">已服务5.9万+次 | 平台监管价 | 杜绝乱收费</div>
            <div class="service-guarantee">
                <van-tag type="success">服务保障</van-tag>
                <van-tag type="info">明码标价</van-tag>
                <van-tag type="info">未上门随时退</van-tag>
                <van-tag type="info">90天质保</van-tag>
            </div>
            <div class="service-location">
                <van-cell title="南昌市青山湖区" label="最快今天12:00上门服务" is-link />
            </div>
        </div>
        <van-tabs v-model="active">
            <van-tab title="服务详情">
                <div class="service-advantage">
                    <van-button type="primary">服务优势</van-button>
                    <div class="advantage-text">安装再难，我们帮你解决!</div>
                    <!-- <img src="https://example.com/advantage.jpg" alt="Advantage"> -->
                </div>
            </van-tab>
            <van-tab title="用户评价">
                <van-list>
                    <van-cell v-for="(item, index) in userReviews" :key="index" :title="item.user"
                        :label="item.review" />
                </van-list>
            </van-tab>
        </van-tabs>
        <div class="bottom-buttons">
            <div class="customer-service">
                <van-icon name="chat-o" />
                <span>客服</span>
            </div>
            <div class="shopping-cart">
                <van-icon name="cart-o" />
                <span>购物车</span>
            </div>
            <div class="add-to-cart">
                <van-button type="info" to="addgwc">加入购物车</van-button>
            </div>
            <div class="fill-demand">
                <van-button type="primary" @click="toConfirm">填写需求</van-button>
                <div class="demand-description">查看附近师傅报价 已有4.675+人获得报价</div>
            </div>
        </div>
    </div>
</template>

<script setup name="BedInstallation">
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { emitter } from '../utils/eventBus'
import { getServiceById } from "../api"
const title = ref("茶几角几安装")
const router = useRouter()
const serviceId = ref(1)
const active = ref(0)
const service = ref()
const userReviews = ref([
    { user: '用户1', review: '师傅安装很专业，速度也快，好评！' },
    { user: '用户2', review: '服务态度很好，价格也合理，满意！' },
    { user: '用户3', review: '安装效果超出预期，非常不错！' }
])

//获取后端对应的服务
const getService = async () => {
    let result = await getServiceById(serviceId.value)
    //   console.log("result",result);
    // console.log("result", result.services.serviceName);
    service.value = result.services
    // console.log(service.value);
    title.value = result.services.serviceName
}
//把数据传给ConfirmOrder
const toConfirm = async () => {
    await router.push({ name: "confirmOrder" }); // 先跳转
    emitter.emit('news-service', {
        newsService: service.value // 直接传值，避免 Proxy
    });
}
const goBack = () => {
    // 实现返回逻辑  
    router.push({ name: 'NavTest' })
}
const route = useRoute();
onMounted(() => {
    if (route.query.serviceId) {
        serviceId.value = route.query.serviceId;
        //    console.log('@@serviceId',serviceId);
    }

    getService()
})  
</script>

<style lang='less' scoped>
.header {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .back-icon {
        flex: 1;
    }

    .title {
        flex: 2;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }

    .share-icon {
        flex: 1;
        text-align: right;
    }
}

.banner {
    position: relative;

    img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .banner-indicator {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;

        span {
            width: 8px;
            height: 8px;
            margin: 0 4px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;

            &.active {
                background-color: #fff;
            }
        }
    }
}

.service-info {
    padding: 16px;

    .service-title {
        color: #f00;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 8px;
    }

    .service-description {
        color: #666;
        font-size: 14px;
        margin-bottom: 16px;
    }

    .service-guarantee {
        margin-bottom: 16px;
    }

    .service-location {
        margin-top: 16px;
    }
}

.service-advantage {
    padding: 16px;

    .advantage-text {
        margin-top: 16px;
        font-size: 18px;
        font-weight: bold;
    }

    img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        margin-top: 16px;
    }
}

.bottom-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background-color: #fff;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    padding: 16px;

    .customer-service,
    .shopping-cart {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        span {
            font-size: 12px;
            margin-top: 4px;
        }
    }

    .add-to-cart,
    .fill-demand {
        flex: 2;
        display: flex;
        flex-direction: column;
        align-items: center;

        .demand-description {
            font-size: 12px;
            color: #666;
            margin-top: 4px;
        }
    }
}
</style>
